<template>
	<view class="pb-safe-area flex flex-column min-vh-100 page grid-gap-10"
		:style="[`--xl-status-bar-height:${PLATFORM.statusBarHeight}px`]">
		<view class="flex flex-column grid-gap-4 flex-y-center">
			<view class="p-4 slef-left" @tap="$page.back()">
				<uni-icons type="closeempty" color="var(--xl-grey)" size="24"></uni-icons>
			</view>
			<image :src="WEBCONFIG.web_logo" v-if="WEBCONFIG.web_logo" class="rounded-4"
				style="width: 100px;height: 100px;"></image>
			<image src="@/static/logo.png" v-else class="rounded-4" style="width: 100px;height: 100px;"></image>
			<view class="h6">
				登录<text class="text-primary">{{ WEBCONFIG.web_name }}</text>
			</view>
		</view>

		<x-login-form ref="xLoginFormRef" @success="$page.back()" :show-logo="false" @wx-login="wx_login" />
	</view>
</template>

<script setup>
import { ref, nextTick } from "vue";
import { usePlatformStore, useWebConfigStore, useRefs } from "@/stores";
import { onLoad } from '@dcloudio/uni-app';
import { $page,wxLogin } from "@/utils";
const PlatformStore = usePlatformStore();
const { PLATFORM } = useRefs(PlatformStore);
const WebConfigStore = useWebConfigStore();
const { WEBCONFIG } = useRefs(WebConfigStore);
const xLoginFormRef = ref();
onLoad(() => {
	nextTick(() => {
		xLoginFormRef.value.show();
	})
})
const wx_login = () => {
    wxLogin({})
}
</script>

<style lang="scss" scoped>
.page {
	background: radial-gradient(circle at 15% 20%, var(--xl-primary) -100%, transparent 35%),
		radial-gradient(circle at 27% 5%, var(--xl-primary-light-3) -50%, transparent 30%),
		radial-gradient(circle at 85% 17%, var(--xl-primary-light-1) -50%, transparent 25%);
	background-repeat: no-repeat;
	background-position: top center;
	/* #ifdef H5 */
	background-attachment: fixed;
	/* #endif */
	background-color: #FFFFFF;
	padding-top: max(constant(safe-area-inset-top), var(--xl-status-bar-height));
	padding-top: max(env(safe-area-inset-top), var(--xl-status-bar-height));
	box-sizing: border-box;
}
.slef-left {
	align-self: flex-start;
}
</style>
